<template>
  <div style="margin-left: 10px">
    <div>
      <div style="margin-top: 10px">
        <el-form inline :model="form">
          <el-form-item label="角色名称">
            <el-input
              v-model="form.roleName"
              style="max-width: 200px"
              clearable="clearable"
            ></el-input>
          </el-form-item>
          <el-button @click="reset" type="primary">重置</el-button>
          <el-button @click="search" type="primary">查询</el-button>
        </el-form>
      </div>
      <el-button @click="open" type="primary">新增</el-button>
      <el-table border :data="tableData" class="tableData">
        <el-table-column prop="id" label="ID"> </el-table-column>
        <el-table-column prop="roleName" label="角色名称" width="180" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="delRow(scope.row)">编辑</el-button>
            <el-button type="text" @click="openDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :hide-on-single-page="hidePage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="currentSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog title="角色新增" :visible.sync="addFlag">
      <AddDialog
        :addFlag="addFlag"
        ref="addDialog"
        @closeModel="closeModel"
        @submit="submit"
      ></AddDialog>
    </el-dialog>
    <!-- 新增
    <el-input v-model="userName" style="width: 200px"></el-input>
    <el-input v-model="passWord" style="width: 200px"></el-input>
    <el-button @click="getList">刷新</el-button>
    <el-button @click="addLogin">提交</el-button> -->
  </div>
</template>

<script>
import axios from "axios";
import AddDialog from "./add.vue";
import { title } from "@/settings";
import { getToken, setToken, removeToken } from "@/utils/auth";
import { post } from "@/api/user";

export default {
  name: "XXX系统",
  components: {
    AddDialog,
  },
  data() {
    return {
      tableData: [],
      userName: "",
      passWord: "",
      addFlag: false,
      currentPage: 1,
      currentSize: 5,
      total: undefined,
      hidePage: false,
      form: {
        roleName: "",
      },
    };
  },
  computed: {},
  //页面初始化
  created() {
    this.getList(1, 5);
  },
  methods: {
    //查询
    search() {
      this.getList(this.currentPage, this.currentSize);
    },
    //重置
    reset() {
      this.currentPage = 1;
      this.currentSize = 5;
      this.form.roleName = "";
      this.getList(1, 5);
    },
    //查询后台分页
    getList(pageNo, pageSize) {
      post("http://127.0.0.1:8081/role/getList", {
        pageNo: pageNo,
        pageSize: pageSize,
        roleName: this.form.roleName,
      }).then((res) => {
        if (res.flag) {
          if (res.data.total == 0) this.hidePage = true;
          else this.hidePage = false;
          this.tableData = res.data.data;
          this.total = res.data.total;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //新增
    submit(v) {
      axios
        .post("http://127.0.0.1:8081/role/add", {
          roleName: v.roleName,
        })
        .then((res) => {
          if (res.data.flag) {
            this.reset();
            this.closeModel();
          }
        });
    },
    //删除
    delete(row) {
      axios
        .delete("http://127.0.0.1:8081/role/delete?id=" + row.id)
        .then((res) => {
          if (!res.data.flag) this.$message.error(res.data.message);
          this.reset();
        });
    },
    //新增--弹出层
    open() {
      this.addFlag = true;
    },
    //父组件
    closeModel() {
      this.addFlag = false;
      this.$refs.addDialog.form.roleName = "";
    },
    //每页 下拉
    handleSizeChange(val) {
      this.getList(this.currentPage, val);
      this.currentSize = val;
    },
    //当前页
    handleCurrentChange(val) {
      this.getList(val, this.currentSize);
      this.currentPage = val;
    },
    //打开删除提示框
    openDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delete(row);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.tableData {
  width: 50%;
  margin-top: 10px;
}
</style>
